<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色组维护</title>

		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>


	</head>
	<body>

		<div id="app">
			<el-table size="mini" :data="tableData" border style="width: 100%">
				<el-table-column prop="roleid" label="角色id" width="180">
				</el-table-column>
				<el-table-column prop="rolename" label="角色名字" width="180">
				</el-table-column>

				<el-table-column>
					<!-- <template slot="header" slot-scope="scope">
						<el-button @click="dialogVisible=true" type="primary" size="mini">增加</el-button>
					</template> -->
					<template slot-scope="scope">
						<!-- {{scope.row.rolegroup}} -->
						<template v-for="obj in scope.row.rolegroup" v-if="obj.usersid!=null">
							<el-tag>{{obj.usersname}}</el-tag>
						</template>

						<template v-for="obj in scope.row.rolegroup" v-if="obj.sectionid!=null">
							<el-tag type="info">{{obj.sectionname}}</el-tag>
						</template>

						<template v-for="obj in scope.row.rolegroup" v-if="obj.jobid!=null">
							<el-tag type="success">{{obj.jobname}}</el-tag>
						</template>
					</template>
				</el-table-column>

				<el-table-column>
					<template slot="header" slot-scope="scope">
						操作
					</template>
					<template slot-scope="scope">
						<el-button  type="primary" size="mini">角色组</el-button>
					</template>
				</el-table-column>

			</el-table>

		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					tableData: [],
				},
				methods: {
					initdata() {
						let that = this
						//根据角色id获取对应的资源权限id集合
						axios.post("http://localhost:8081/selectrolegroup").then(function(res) {
							// alert(JSON.stringify(res.data.data.list))
							that.tableData = res.data.data.list
						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() {
					this.initdata()
				}
			})
		</script>
	</body>
</html>